<template>
  <div
    class="pull-down"
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="busy"
    :infinite-scroll-distance="distance"
  >
    {{ showText }}
  </div>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll'
export default {
  name: 'PullUp',
  directives: { infiniteScroll },
  props: {
    distance: {
      type: Number,
      default: 50
    },
    busy: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    text: {
      type: Object,
      default() {
        return {
          tip: '上拉加载更多',
          ing: '正在加载中...',
          end: '到底了'
        }
      }
    }
  },
  computed: {
    showText() {
      if (this.loading) {
        return this.text.ing
      } else {
        if (this.busy) {
          return this.text.end
        }
        // debug 001
        // return this.text.tip
        return ''
      }
    }
  },
  methods: {
    loadMore() {
      this.$emit('loadMore')
    }
  }
}
</script>

<style scoped lang="stylus">
.pull-down
  //background red
  height 35px
  color #ccc
</style>
